<template>
  <div
    class="setting-r-content"
    style="overflow-y:auto;"
  >
    <Row class="setting-r-c_params">
      <Col
        span="24"
        class="col_1"
      >
      <Icon
        style="font-size:20px;"
        type="md-reorder"
      />
      <h2>参数设置</h2>
      </Col>
      <Col
        span="24"
        class="col_2"
      >
      <div class="h3_title">
        <h3>设备类型</h3>
      </div>
      <div class="button_add">
        <Button
          size="small"
          @click="addNew"
          :disabled="userRole==='ROLE_DEMO'"
        >新增</Button>
      </div>
      <div class="table_list">
        <Table
          :columns="userRole==='ROLE_DEMO'?columnsDemo:columns"
          :data="tableData"
        ></Table>
      </div>
      </Col>

      <Modal
        v-model="dialogVisible"
        draggable
        :title="isEdit?'编辑设备类型':'新增设备类型'"
      >
        <Form
          :model="addForm"
          :label-width="80"
          ref="refAdd"
          :rules="rules"
        >
          <FormItem
            label="设备类型:"
            prop="typeName"
          >
            <Input
              style="width:80%;"
              v-model="addForm.typeName"
              placeholder="设备类型..."
            ></Input>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button @click="dialogVisible=false;">取消</Button>
          <Button
            :loading="btnDisabled"
            type="primary"
            @click="confirmAddNew"
          >
            <span v-if="!btnDisabled">确认</span>
            <span v-else>保存中</span>
          </Button>
        </div>
      </Modal>
    </Row>
  </div>

</template>
<script>
import { paramsColumns } from "./material";
import { validateAddress } from "@/utils/rules";
import { postOdt, getOdt, delOdt, putOdt } from "@/api";
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      userRole: state => state.userInfo.rname
    })
  },
  mounted() {
    this.getodtList();
  },
  data() {
    const vm = this;
    return {
      dialogVisible: false,
      columns: [...paramsColumns(vm, false)],
      columnsDemo: [...paramsColumns(vm, true)],
      tableData: [],
      isEdit: false,
      editId: "",
      addForm: {
        typeName: ""
      },
      rules: {
        typeName: [
          {
            required: true,
            validator: validateAddress(
              "设备类型",
              "设备类型只能输入中文、字母、数字、下划线和中划线"
            ),
            trigger: "blur"
          }
        ]
      },
      btnDisabled: false
    };
  },
  methods: {
    // 新增
    addNew() {
      this.isEdit = false;
      this.dialogVisible = true;
      this.btnDisabled = false;
      this.$nextTick(_ => {
        this.$refs.refAdd.resetFields();
      });
    },

    // 确定新增
    confirmAddNew() {
      const vm = this;
      let params = {
        ...vm.addForm
      };
      vm.$refs.refAdd.validate(valid => {
        if (valid) {
          vm.btnDisabled = true;
          if (vm.isEdit) {
            vm.submitEdit();
          } else {
            postOdt(params).then(res => {
              if (res.code === 200) {
                vm.getodtList();
                setTimeout(_ => {
                  vm.btnDisabled = false;
                  vm.dialogVisible = false;
                }, 500);
              }
            });
          }
        }
      });
    },

    // 编辑保存
    submitEdit() {
      const vm = this;
      let params = {
        ...vm.addForm,
        id: vm.editId
      };
      putOdt(params).then(res => {
        if (res.code === 200) {
          vm.getodtList();
          vm.$Message.success("操作成功");
          vm.btnDisabled = false;
          vm.dialogVisible = false;
        } else {
          vm.$Message.error(res.message);
        }
      });
    },

    // 加载列表
    getodtList() {
      getOdt().then(res => {
        this.tableData = res.data;
      });
    },

    // 删除
    handleDelete(row) {
      const { id } = row;
      const vm = this;
      delOdt(id).then(res => {
        if (res.code === 200) {
          vm.getodtList();
          vm.$Message.success("操作成功");
        } else {
          vm.$Message.error(res.message);
        }
      });
    },

    // 编辑
    handleEdit(row) {
      this.isEdit = true;
      this.dialogVisible = true;
      this.btnDisabled = false;
      this.$nextTick(_ => {
        this.$refs.refAdd.resetFields();
        this.addForm.typeName = row.typeName;
        this.editId = row.id;
      });
    }
  }
};
</script>
